<?php

use app\assets\AppAsset;

AppAsset::addCss($this, '/plugin/ztree/css/zTreeStyle.css');
AppAsset::addCss($this, '/css/page/admin-auth-index.css');
?>

<el-header class="top-wrapper" height="auto">
    <el-row :inline="true" class="button-container">
        <el-col :xs="9" :sm="7" :md="6" :lg="5">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <a><i class="el-icon-location-outline"></i>&nbsp;首页</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :xs="15" :sm="17" :md="18" :lg="19" class="text-right">
            <el-button class="margin-right-10" size="mini" type="danger"
                       @click.native="showClearDialog()">
                刷新角色菜单缓存
            </el-button>
            <el-button class="" size="mini" type="danger"
                       @click.native="reload()">
                刷新权限
            </el-button>
            <el-dropdown size="mini">
                <el-button type="primary" size="mini">
                    更多操作
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="openItem(null)"
                                      size="mini" :divided="true">
                        批量恢复
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="disabledItem(null)"
                                      size="mini">
                        批量禁用
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-col>
        <el-col class="padding-top-10" style="display: none;">
            <!-- 提醒 START -->
            <div class="tip no-margin-top">
                <el-collapse v-model="setting.activeNotice" accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                            温馨提示
                        </span>
                        </template>
                        <div class="content">
                            <p>
                                1、菜单最多添加到3级，4及上不展示！
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
        </el-col>
    </el-row>
    <el-form :inline="true" :model="searchForm" @submit.native.prevent
             class="search-container">
        <el-form-item label="状态" class="padding-right-30">
            <el-radio-group size="mini" v-model="searchForm.status"
                            @change="getList(false)">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="key"
                                 v-for="(item, key) in setting.statusTxt">
                    {{item}}
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="名称过滤" class="">
            <el-input placeholder="输入关键字进行过滤"
                      v-model="searchForm.label" size="small"
                      class="input-with-select vert-align-init" type="text"
                      size="small" id="worldSearch">
                <el-button-group slot="append">
                    <el-button icon="el-icon-search"
                               size="small" @click="getList(false)">
                    </el-button>
                </el-button-group>
            </el-input>
        </el-form-item>
        <el-form-item label="" class="float-right el-form-item-more" style="display: none;">
            <el-button type="text" @click="moreSearchClick">
                <span v-if="!setting.showAllSearch">
                    更多&nbsp;<i class="w-icon-dowMore"></i>
                </span>
                <span v-else>
                    隐藏&nbsp;<i class="w-icon-upClose"></i>
                </span>
            </el-button>
        </el-form-item>
        <el-collapse-transition>
            <div v-show="setting.showAllSearch" id="searchAllAni"
                 class="more-search-container">
                <!-- 此处添加[el-form-item] -->
            </div>
        </el-collapse-transition>
    </el-form>
</el-header>
<el-main class="content-wrapper transits">
    <el-row :gutter="30">
        <el-col :span="9">
            <div class="am-panel-wrapper">
                <div class="am-panel-hd">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-tooltip class="item" effect="light" placement="top-start">
                                <div slot="content">
                                    <span class="title-txt">未取得权限</span>
                                    <span v-text="'(' + haveNotAuth.count + '个)'"
                                          class="count-txt font-third"></span>
                                </div>
                                <div class="text-more-ellipsis">
                                    <span class="title-txt">未取得权限</span>
                                    <span v-text="'(' + haveNotAuth.count + '个)'"
                                          class="count-txt font-third"></span>
                                </div>
                            </el-tooltip>
                        </el-col>
                        <el-col :span="6" class="text-right text-more-ellipsis">
                            <el-button type="text" size="mini"
                                       @click="checkCancelAll(true, 'notHaveTreeDemo')">
                                全选
                            </el-button>
                            <el-button type="text" size="mini"
                                       @click="checkCancelAll(false, 'notHaveTreeDemo')">
                                取消
                            </el-button>
                        </el-col>
                        <el-col :span="6" class="text-right text-more-ellipsis">
                            <el-button type="text" size="mini"
                                       @click="openCloseAll(true, 'notHaveTreeDemo')">
                                全开
                            </el-button>
                            <el-button type="text" size="mini"
                                       @click="openCloseAll(false, 'notHaveTreeDemo')">
                                全关
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="am-panel-bd am-scrollable-vertical" :style="transferStyle">
                    <el-scrollbar class="main-scroller" style="height: 100%;width: 100%;">
                        <ul id="notHaveTreeDemo" class="ztree"></ul>
                    </el-scrollbar>
                </div>
            </div>
        </el-col>
        <el-col :span="6" class="text-center">
            <div class="center-role-wrapper">
                <el-select v-model="searchForm.roleId" placeholder="请选择角色"
                           @change="getList()">
                    <el-option
                            v-for="(item, key) in roleList" :key="key"
                            :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="center-do-wrapper" :style="transButtonStyle">
                <el-button type="primary" icon="el-icon-right" plain @click="toHave">
                </el-button>
                <el-button type="primary" icon="el-icon-back" plain @click="toHaveNot">
                </el-button>
            </div>
            <div class="center-do-wrapper">
                <el-button @click="saveAuth" type="primary" size="medium" @click="saveAuth">
                    保存
                </el-button>
            </div>
        </el-col>
        <el-col :span="9">
            <div class="am-panel-wrapper">
                <div class="am-panel-hd">
                    <el-row :gutter="0">
                        <el-col :span="12" class="text-more-ellipsis">
                            <el-tooltip class="item" effect="light" placement="top-start">
                                <div slot="content">
                                    <span class="title-txt">已取得权限</span>
                                    <span v-text="'(' + haveAuth.count + '个)'"
                                          class="count-txt font-third"></span>
                                </div>
                                <div class="text-more-ellipsis">
                                    <span class="title-txt">已取得权限</span>
                                    <span v-text="'(' + haveAuth.count + '个)'"
                                          class="count-txt font-third"></span>
                                </div>
                            </el-tooltip>
                        </el-col>
                        <el-col :span="6" class="text-right text-more-ellipsis">
                            <el-button type="text" size="mini"
                                       @click="checkCancelAll(true, 'haveTreeDemo')">
                                全选
                            </el-button>
                            <el-button type="text" size="mini"
                                       @click="checkCancelAll(false, 'haveTreeDemo')">
                                取消
                            </el-button>
                        </el-col>
                        <el-col :span="6" class="text-right text-more-ellipsis">
                            <el-button type="text" size="mini"
                                       @click="openCloseAll(true, 'haveTreeDemo')">
                                全开
                            </el-button>
                            <el-button type="text" size="mini"
                                       @click="openCloseAll(false, 'haveTreeDemo')">
                                全关
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="am-panel-bd am-scrollable-vertical" :style="transferStyle">
                    <el-scrollbar class="main-scroller" style="height: 100%;width: 100%;">
                        <ul id="haveTreeDemo" class="ztree"></ul>
                    </el-scrollbar>
                </div>
            </div>
        </el-col>
    </el-row>
</el-main>

<!-- 刷新缓存弹出层 -->
<el-dialog title="更新缓存" :visible.sync="clearCache.showClearDialog"
           class="dialog-wrapper scroll-dialog dialog-small" :lock-scroll="true" width="40%"
           :append-to-body="true">

    <div v-loading="clearCache.showClearLoading" style="width: 100%;height: 100%;">
        <iframe :src="clearCache.pageUrl" class="clear-cache-iframe"
                id="clearCacheIframe" ref="cacheIframe"></iframe>
    </div>

    <div slot="footer">
        <el-button size="mini" @click="clearCache.showClearDialog = false">关闭</el-button>
    </div>
</el-dialog>
<!-- 刷新缓存弹出层 -->

<?= AppAsset::addScript($this, '/js/page/admin-auth-index.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.core.min.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.exedit.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.excheck.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.exhide.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.fuzzysearch.js'); ?>
<?= $this->registerJs('new app();'); ?>
